<template>
  <div ref="dom" class="charts chart-china"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'
import { Coordinates, CityCP } from './city.js'
import _cloneDeep from 'clone-deep'
echarts.registerTheme('tdTheme', tdTheme)

export default {
  name: 'ChartChina',

  props: {
    value: Array,
    color: Array,
    text: String,
    subtext: String,
    geoCoordMap: Array,
    cityList: Array
  },

  data () {
    return {
      dom: null,
      cityCP: _cloneDeep(CityCP),
      coordinates: _cloneDeep(Coordinates)
    }
  },

  watch: {
    value: {
      handler (val, oldVal) {
        this.value = val
        this.initChina()
      }
    }
  },

  mounted () {
    this.$nextTick(() => {
      this.initChina()
    })
  },

  methods: {
    resize () {
      this.dom.resize()
    },

    initChina () {
      var that = this
      let option = {
        title: {
          text: this.text,
          subtext: this.subtext,
          x: 'left'
        },
        tooltip: {
          trigger: 'item',
          padding: [10, 20, 10, 20],
          formatter: function (params) {
            if (params.data) {
              return `
                <div class="line-h-28">
                  <p class="font-16 pb-5">${params.data.fullName}</p>
                  <p>客户数量：<span class="text-warning2 font-16 font-weight pr-5">${params.data.companyCount}</span>家</p>
                  <p>人事代理：<span class="text-warning2 font-16 font-weight pr-5">${params.data.agentCount}</span>家</p>
                  <p>劳务派遣：<span class="text-warning2 font-16 font-weight pr-5">${params.data.laborDispatchCount}</span>家</p>
                  <p>劳务外包：<span class="text-warning2 font-16 font-weight pr-5">${params.data.outsourcingCount}</span>家</p>
                  <p>员工数量：<span class="text-warning2 font-16 font-weight pr-5">${params.data.empCount}</span>人</p>
                  <p>在职：<span class="text-warning2 font-16 font-weight pr-5">${params.data.beHiringCount}</span>人</p>
                  <p>离职：<span class="text-warning2 font-16 font-weight pr-5">${params.data.noBeHiringCount}</span>人</p>
                </div>
              `
            } else {
              return `
                <div class="line-h-28">${params.name} 暂无数据</div>
              `
            }
          }
        },
        color: this.color,
        visualMap: {
          // type: 'piecewise',
          // min: 0,
          // max: 100,
          show: false,
          range: null,
          splitNumber: 5,
          inRange: {
            color: ['#bfe7ff', '#1badf4', '#0996da']
          },
          // color: ['#fff000', '#feb527', '#ff7200'], // 黄色
          // color: ['#ff8098', '#f44d6c', '#e72525'], // 红色
          // color: ['#bfe7ff', '#1badf4', '#0996da'], // 蓝色
          // color: ['#4cd02e', '#b5ec41', '#76e15d'], // 绿色
          // color: ['#0996da', '#82f766', '#fafd27', '#fe5050', '#1db7e5'], // 彩色
          textStyle: {
            color: '#999'
          },
          outOfRange: {
            color: ['#bfe7ff', '#1badf4', '#0996da']
          },
          seriesIndex: 0
        },
        geo: {
          map: 'china',
          show: true,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false,
            }
          },
          roam: false,
          // itemStyle: {
          //   normal: {
          //     areaColor: '#023677',
          //     borderColor: '#1180c7',
          //   },
          //   emphasis: {
          //     areaColor: '#4499d0',
          //   }
          // }
        },
        series: [
          {
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
              normal: {
                show: true,
                color: '#54acd7', // 省份默认的文字颜色
                formatter: function (params) {
                  // return params.data ? params.data.fullName : params.name
                  return params.name
                }
              },
              emphasis: {
                color: '#000' // 鼠标经过时的文字颜色
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#9dd9fd',
                borderColor: '#d3f3ff'
              },
              emphasis: {
                show: false,
                color: '#fff',
                areaColor: '#ffcc3b' // 鼠标经过时的黄色背景
                // areaColor: '#54c7ff' // 鼠标经过时的蓝色背景
              }
            },
            data: this.value
          },
          {
            // type: 'effectScatter', // 带涟漪的散点图
            type: 'scatter',
            coordinateSystem: 'geo',
            legendHoverLink: false,            
            visualMap: false,
            symbol: 'circle',
            // 红旗图片
            // symbol: 'image://',
            // 安博LOGO
            symbol: 'image://',
            symbolSize: 18,
            showEffectOn: 'render',
            hoverAnimation: false,
            rippleEffect: {
              brushType: 'stroke'
            },
            // symbolOffset: [0, -20],
            itemStyle: {
              color: 'yellow'
            },
            zlevel: 2,
            tooltip: {
              show: false
            },
            label: {
              show: true,
              color: '#000',
              formatter: function (params) {
                return params.name
              },
              position: 'bottom'
            },
            silent: true,
            data: this.geoCoordMap // 坐标散点（单个）
          },
          // {
          //   type: 'scatter', // 散点图
          //   coordinateSystem: 'geo',
          //   legendHoverLink: false,            
          //   visualMap: false,
          //   // 红旗图片
          //   // symbol: 'image://',
          //   // 安博LOGO
          //   symbol: 'image://',
          //   symbolSize: 13,
          //   showEffectOn: 'render',
          //   hoverAnimation: false,
          //   rippleEffect: {
          //     brushType: 'stroke'
          //   },
          //   // symbolOffset: ['-10%', '10%'],
          //   itemStyle: {
          //     color: 'yellow'
          //   },
          //   tooltip: {
          //     show: false
          //   },
          //   silent: true,
          //   data: that.convertData(that.cityList) // 坐标散点（单个）
          // }
        ]
      }
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(option)
      on(window, 'resize', this.resize)

      var that = this
      this.dom.off('click')
      this.dom.on('click', function (params) {
        console.log(params)
        that.$emit('getAll', params.name, params.data)
      })
    },

    convertData (data) {
      var that = this
      var res = []
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.coordinates[data[i].name];
        if (geoCoord) {
          res.push(geoCoord.concat(data[i].value));
        }
      }
      return res
    }
  },

  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>

<style lang="less" scoped>
</style>
